<!doctype html>
<!--[if lt IE 7]><html lang="en" class="no-js ie6"><![endif]-->
<!--[if IE 7]><html lang="en" class="no-js ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->

<head>
    <meta charset="UTF-8">
    <title>JK-Pay 首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="shortcut icon" href="favicon.ico">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/jquery.easy-pie-chart.css">
    <link rel="stylesheet" href="css/styles.css" title="mainStyle">

    <!-- REVOLUTION BANNER CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

    <script src="js/modernizr.custom.32033.js"></script>

    <!--[if IE]><script type="text/javascript" src="js/excanvas.compiled.js"></script><![endif]-->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!--login-->


</head>

<body>

    <div class="pre-loader">
        <div class="load-con">
            <img src="img/logo-blue.png" class="animated fadeInDown" alt="">
            <div class="spinner">
                <div class="bounce1"></div>
                <div class="bounce2"></div>
                <div class="bounce3"></div>
            </div>
        </div>
    </div>
    <div class="go-down">
        <a href="#whoWeAre">
            <i class="fa fa-angle-down fa-3x"></i>
        </a>
    </div>
    <!-- Wrap all page content here -->
    <div id="wrap" class="home">

        <header class="masthead">
            <div class="slider-container" id="slider">
                <div class="tp-banner-container">
                    <div class="tp-banner">
                        <ul>
                            <li data-transition="slotfade-horizontal" data-slotamount="7" data-masterspeed="500">
                                <!-- MAIN IMAGE -->
                                <img src="img/dummy.png" data-lazyload="img/samples/slider-bk.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
                                <!-- LAYERS -->
                                <div class="tp-caption italic large_white_light sft hidden-xs" data-x="left" data-y="center" data-hoffset="0" data-voffset="-100" data-speed="700" data-start="1300" data-easing="Power4.easeOut">
                                 鲜活代码  &  艺术盛宴
                                </div>
                                <div class="tp-caption italic large_white_light sfl hidden-xs" data-x="left" data-y="center" data-hoffset="0" data-voffset="-50" data-speed="700" data-start="1500" data-easing="Power4.easeOut">
                                    ART .  
                                </div>
                                <div class="tp-caption italic large_white_light sfb hidden-xs" data-x="left" data-y="center" data-hoffset="147" data-voffset="-50" data-speed="700" data-start="1700" data-easing="Power4.easeOut">
                                        CODE .
                                </div>
                                <div class="tp-caption italic large_white_light sfr hidden-xs" data-x="left" data-y="center" data-hoffset="335" data-voffset="-50" data-speed="700" data-start="1900" data-easing="Power4.easeOut">
                                     JK-PAY   
                                </div>
                                <div class="tp-caption lfb " data-x="left" data-y="center" data-hoffset="0" data-voffset="25" data-speed="1000" data-start="1900" data-easing="Power4.easeOut">
                                    <a href="#get-in-login" class="btn btn-naked">即刻出发<span class="fa fa-angle-right"></span></a>
                                </div>

                            </li>
                            <li data-transition="slotfade-horizontal" data-slotamount="7" data-masterspeed="500">
                                <!-- MAIN IMAGE -->
                                <img src="img/dummy.png" data-lazyload="img/samples/slider-bk3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption sft fadeout" data-x="center" data-y="center" data-hoffset="0" data-voffset="0" data-speed="500" data-start="700" data-easing="Power4.easeOut">
                                    <img src="img/samples/macbook-bl.png" class="macbook-image" alt="">
                                </div>

                                <div class="tp-caption large_white_light italic sfb hidden-xs" data-x="left" data-y="center" data-hoffset="0" data-voffset="0" data-speed="1000" data-start="1300" data-easing="Power4.easeOut">
                                    <a href="#portfolio" class="btn btn-naked">诚意十足</a>
                                </div>
								
                                
                                <div class="tp-caption italic large_white_light sft hidden-xs" data-x="right" data-y="center" data-hoffset="0" data-voffset="0" data-speed="1000" data-start="1300" data-easing="Power4.easeOut">
                                    <a href="#team" class="btn btn-naked">只为让这一切更摇滚</a>
                                </div>
                            </li>
                            <li data-transition="slotfade-horizontal" data-slotamount="7" data-masterspeed="500">
                                <!-- MAIN IMAGE -->
                                <img src="img/dummy.png" data-lazyload="img/samples/slider-bk2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption lfl fadeout" data-x="left" data-y="center" data-hoffset="0" data-voffset="0" data-speed="500" data-start="700" data-easing="Power4.easeOut">
                                    <img src="img/samples/iphone.png" alt="">
                                </div>
                                <div class="tp-caption large_white_bold sft" data-x="520" data-y="center" data-hoffset="0" data-voffset="-120" data-speed="500" data-start="1200" data-easing="Power4.easeOut">
                                    <h1>.welcome 乌托邦</h1>
                                </div>
                                <div class="tp-caption large_white_light sfb" data-x="520" data-y="center" data-hoffset="0" data-voffset="-40" data-speed="1000" data-start="1300" data-easing="Power4.easeOut">
                                    模拟支付 * 我们认真的
                                </div>
                                <div class="tp-caption large_white_light sfb" data-x="520" data-y="center" data-hoffset="0" data-voffset="10" data-speed="1000" data-start="1300" data-easing="Power4.easeOut">
                                    好看？ & 好用？
                                </div>
                                <div class="tp-caption large_white_light sfb" data-x="520" data-y="center" data-hoffset="0" data-voffset="60" data-speed="1000" data-start="1300" data-easing="Power4.easeOut">
                                    一个不能少！ 《 JK-PAY》 & Web Apps
                                </div>
                                <div class="tp-caption sfb hidden-xs" data-x="520" data-y="center" data-hoffset="0" data-voffset="150" data-speed="1000" data-start="1700" data-easing="Power4.easeOut">
                                    <a href="#about" class="btn btn-primary btn-lg">LEARN MORE</a>
                                </div>
                            </li>

                        </ul>
                        <div class="tp-bannertimer"></div>
                    </div>
                </div>

            </div>

            <!-- Fixed navbar -->
            <div class="navbar navbar-static-top" id="nav" role="navigation">
                <div class="theme-switcher">
                    <div class="colors">
                        <a href="javascript:void(0)" class="blue"></a>
                        <a href="javascript:void(0)" class="orange"></a>
                        <a href="javascript:void(0)" class="red"></a>
                    </div>
                    <a href="javascript:void(0)" class="Switcher"><span class="fa fa-pencil fa-lg"></span></a>
                </div>
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <i class="fa fa-align-justify"></i>
                        </button>
                        <a class="navbar-brand" href="#">
                            <img src="img/logo-blue.png" alt="">
                        </a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active"><a href="#slider">首页</a>
                            </li>
                            <li><a href="#about">关于</a>
                            </li>
                            <li><a href="#services">服务</a>
                            </li>
                            <li><a href="#team">我们</a>
                            </li>
                            <li><a href="#portfolio">体验</a>
                            </li>
                            <li><a href="#get-in-touch">注册</a>
                            </li>
                            <li><a href="#get-in-login">登陆</a>
                            </li>
                            <li class="social-nav visible-lg">
                                <a href="#"><i class="fa fa-twitter"></i></a>
                                <a href="#"><i class="fa fa-facebook"></i></a>
                                <a href="#"><i class="fa fa-google-plus"></i></a>
                                <a href="#"><i class="fa fa-linkedin"></i></a>
                            </li>
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                </div>
                <!--/.container -->
            </div>
            <!--/.navbar -->

        </header>

        <section id="whoWeAre">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-push-2 clearfix">
                        <div class="section-heading scrollpoint sp-effect3">
                            <h1>.jk-pay <span>sys</span>
                            </h1>
                            <h4> 对你er adipisci praesentium quis omnis dignissimos!</h4>
                            <span class="divider"></span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="media scrollpoint sp-effect2">
                            <a class="pull-left" href="#">
                                <i class="media-object fa fa-star fa-4x"></i>
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">UI极简设计</h4>
                                <p>手机端？PC端？无缝对接。采用BootStrap前端页面框架，秉承极简设计理念，打造先进UI前台。</p>
                            </div>
                        </div>
                        <div class="media scrollpoint sp-effect2">
                            <a class="pull-left" href="#">
                                <i class="media-object fa fa-support fa-4x"></i>
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">安全&高效</h4>
                                <p>异地登陆检测，自动短信验证,Rabbit消息回调机制，Dubbo+Zookerper分布式服务，Oss云存储。。。只为您的安全与效率</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="media right scrollpoint sp-effect1">
                            <a class="pull-right" href="#">
                                <i class="media-object fa fa-send fa-4x"></i>
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">multipurpose layout</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa repellendus aspernatur corrupti ex soluta vel ad quibusdam.</p>
                            </div>
                        </div>
                        <div class="media right scrollpoint sp-effect1">
                            <a class="pull-right" href="#">
                                <i class="media-object fa fa-slack fa-4x"></i>
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">账单管理&智能分析</h4>
                                <p>记录您每一笔支出与收入，定期分析管理，可视化数据，更直观，更贴心.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
       

        <section id="about">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-push-2 clearfix">
                        <div class="section-heading scrollpoint sp-effect3">
                            <h1>.about bond<span>y</span>
                            </h1>
                            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore reiciendis vel reprehenderit expedita cupiditate repellat debitis! Est qui quae consectetur temporibus a illum deleniti? Quae, adipisci praesentium quis omnis dignissimos!</h4>
                            <span class="divider"></span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-12 scrollpoint sp-effect4">
                                <img src="img/samples/imac.png" class="img-responsive img-center" alt="">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="media vertical scrollpoint sp-effect5">
                                    <a href="#">
                                        <i class="media-object fa fa-university fa-2x"></i>
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Why Bondy</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa repellendus aspernatur corrupti ex soluta vel ad quibusdam.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="media vertical scrollpoint sp-effect5">
                                    <a href="#">
                                        <i class="media-object fa fa-user fa-2x"></i>
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">what we do</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa repellendus aspernatur corrupti ex soluta vel ad quibusdam.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="media vertical scrollpoint sp-effect5">
                                    <a href="#">
                                        <i class="media-object fa fa-umbrella fa-2x"></i>
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">our history</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa repellendus aspernatur corrupti ex soluta vel ad quibusdam.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="media vertical scrollpoint sp-effect5">
                                    <a href="#">
                                        <i class="media-object fa fa-taxi fa-2x"></i>
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Achievments</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa repellendus aspernatur corrupti ex soluta vel ad quibusdam.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <section id="highlights">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators vertical">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img src="img/samples/600-300/2.jpg" alt="">
                                </div>
                                <div class="item">
                                    <img src="img/samples/600-300/3.jpg" alt="">
                                </div>
                                <div class="item">
                                    <img src="img/samples/600-300/1.jpg" alt="">
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-6">
                        <h4>Company highlights</h4>
                        <h5>This is how we have aachieved the success!</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, nisi, debitis, quia molestiae ipsa dolores beatae eaque nulla tempora deserunt sunt suscipit quisquam laborum magnam aut reiciendis sed pariatur totam!</p>
                        <ul>
                            <li>Aenean sodales justo in neque adipiscing pulvinar.</li>
                            <li>Vivamus faucibus nisi et fermentum mattis.</li>
                            <li>Proin commodo lorem non gravida varius.</li>
                            <li>Proin condimentum lacus sed tristique lacinia.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section id="features">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 scrollpoint sp-effect1">
                        <img src="img/samples/ipad-bl.png" class="img-responsive ipad-image img-center" alt="">
                    </div>
                    <div class="col-md-7 scrollpoint sp-effect2">
                        <h1>.Core Features of bond<span>Y</span>
                        </h1>
                        <div class="media media-circle">
                            <a class="pull-left" href="#">
                                <i class="media-object fa fa-angle-right fa-2x"></i>
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">Beautiful</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa repellendus aspernatur corrupti ex soluta vel ad quibusdam.</p>
                            </div>
                        </div>
                        <div class="media media-circle">
                            <a class="pull-left" href="#">
                                <i class="media-object fa fa-angle-right fa-2x"></i>
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">Powerful</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa repellendus aspernatur corrupti ex soluta vel ad quibusdam.</p>
                            </div>
                        </div>
                        <div class="media media-circle">
                            <a class="pull-left" href="#">
                                <i class="media-object fa fa-angle-right fa-2x"></i>
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">Responsive</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa repellendus aspernatur corrupti ex soluta vel ad quibusdam.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="services">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-push-2 clearfix">
                        <div class="section-heading scrollpoint sp-effect3">
                            <h1>.Services we offer</h1>
                            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore reiciendis vel reprehenderit expedita cupiditate repellat debitis! Est qui quae consectetur.</h4>
                            <span class="divider"></span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="media media-services right scrollpoint sp-effect1">
                                    <a class="pull-right" href="#">
                                        <i class="media-object fa fa-mobile fa-2x"></i>
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Mobile development</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa.</p>
                                    </div>
                                </div>
                                <div class="media media-services right scrollpoint sp-effect2">
                                    <a class="pull-right" href="#">
                                        <i class="media-object fa fa-link fa-2x"></i>
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">networking</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa.</p>
                                    </div>
                                </div>
                                <div class="media media-services right scrollpoint sp-effect1">
                                    <a class="pull-right" href="#">
                                        <i class="media-object fa fa-film fa-2x"></i>
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">video editing</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="media media-services scrollpoint sp-effect2">
                                    <a class="pull-left" href="#">
                                        <i class="media-object fa fa-send-o fa-2x"></i>
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">startup launching</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa.</p>
                                    </div>
                                </div>
                                <div class="media media-services scrollpoint sp-effect1">
                                    <a class="pull-left" href="#">
                                        <i class="media-object fa fa-shopping-cart fa-2x"></i>
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">ui / ux design</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa.</p>
                                    </div>
                                </div>
                                <div class="media media-services scrollpoint sp-effect2">
                                    <a class="pull-left" href="#">
                                        <i class="media-object fa fa-shopping-cart fa-2x"></i>
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">e-commerce solutions</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eligendi ipsa.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="testimonials">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-push-2 clearfix">
                        <div class="section-heading scrollpoint sp-effect3">
                            <i class="fa fa-quote-left fa-4x"></i>
                            <h3>.Client's testimonials</h3>
                            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore reiciendis vel reprehenderit expedita cupiditate repellat debitis! Est qui quae consectetur.</h4>
                            <span class="divider"></span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div id="testimonials-carousel" class="carousel slide scrollpoint sp-effect3" data-ride="carousel">
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, cumque reprehenderit blanditiis consequatur magnam ipsa vitae deserunt odio nesciunt enim sint tempore magni sit alias illo quisquam unde. Laboriosam, minima!</p>
                                    <div class="row">
                                        <div class="col-md-4 col-md-push-5">
                                            <div class="author">
                                                <h5>Name dot name</h5>
                                                <p>Senior UI Developer - ScoopThemes</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, cumque reprehenderit blanditiis consequatur magnam ipsa vitae deserunt odio nesciunt enim sint tempore magni sit alias illo quisquam unde. Laboriosam.</p>
                                    <div class="row">
                                        <div class="col-md-4 col-md-push-5">
                                            <div class="author">
                                                <h5>Name dot name</h5>
                                                <p>Senior UI Developer - ScoopThemes</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Controls -->
                            <a class="left carousel-control" href="#testimonials-carousel" data-slide="prev">
                                <i class="fa fa-angle-left fa-3x"></i>
                            </a>
                            <a class="right carousel-control" href="#testimonials-carousel" data-slide="next">
                                <i class="fa fa-angle-right fa-3x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </section>

        <section id="buyNow">
            <div class="container">
                <div class="row">
                    <div class="col-md-7 scrollpoint sp-effect2">
                        <img src="img/samples/macbook-bl.png" alt="" class="img-responsive macbook-image img-center">
                    </div>
                    <div class="col-md-5 scrollpoint sp-effect1">
                        <h1>.Buy bond<span>y</span>
                        </h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis esse velit nesciunt. Eius, atque, animi quidem libero harum modi cumque similique eveniet consequuntur dignissimos beatae necessitatibus ipsum cum unde deleniti! animi quidem libero harum modi cumque similique eveniet consequuntur!</p>
                        <a href="#" class="btn btn-primary btn-lg">Buy now</a>
                    </div>
                </div>
            </div>
        </section>

        <section id="team">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-push-2 clearfix">
                        <div class="section-heading scrollpoint sp-effect3">
                            <h1>.Meet the team</h1>
                            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore reiciendis vel reprehenderit expedita cupiditate repellat debitis! Est qui quae consectetur.</h4>
                            <span class="divider"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="row">
                            <div class="member scrollpoint sp-effect5">
                                <div class="member-image">
                                    <img src="img/samples/team/1.jpg" alt="" class="img-responsive img-center">
                                    <div class="member-details">
                                        <h4>Connect with me</h4>
                                        <ul class="social">
                                            <li><a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
                                            </li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, esse molestiae voluptates</p>
                                    </div>
                                </div>
                                <div class="member-name">
                                    <h4>Sara jones</h4>
                                    <p>Art Director</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="row">
                            <div class="member scrollpoint sp-effect3">
                                <div class="member-image">
                                    <img src="img/samples/team/2.jpg" alt="" class="img-responsive img-center">
                                    <div class="member-details">
                                        <h4>Connect with me</h4>
                                        <ul class="social">
                                            <li><a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
                                            </li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, esse molestiae voluptates</p>
                                    </div>
                                </div>
                                <div class="member-name member-odd">
                                    <h4>jon Doe</h4>
                                    <p>UI Developer</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="row">
                            <div class="member scrollpoint sp-effect5">
                                <div class="member-image">
                                    <img src="img/samples/team/3.jpg" alt="" class="img-responsive img-center">
                                    <div class="member-details">
                                        <h4>Connect with me</h4>
                                        <ul class="social">
                                            <li><a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
                                            </li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, esse molestiae voluptates</p>
                                    </div>
                                </div>
                                <div class="member-name">
                                    <h4>Sam jones</h4>
                                    <p>Design Manager</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="row">
                            <div class="member scrollpoint sp-effect3">
                                <div class="member-image">
                                    <img src="img/samples/team/4.jpg" alt="" class="img-responsive img-center">
                                    <div class="member-details">
                                        <h4>Connect with me</h4>
                                        <ul class="social">
                                            <li><a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
                                            </li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, esse molestiae voluptates</p>
                                    </div>
                                </div>
                                <div class="member-name member-odd">
                                    <h4>Sofia jones</h4>
                                    <p>IT Manager</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="skills">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-push-2 clearfix">
                        <div class="section-heading scrollpoint sp-effect3">
                            <h3>.we got skills</h3>
                            <span class="divider"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-6 scrollpoint sp-effect6 text-center">
                        <div class="chart" data-percent="95">
                            <span>95%</span>
                        </div>
                        <h4 class="skill-detail">html/css</h4>
                    </div>
                    <div class="col-md-3 col-sm-6 scrollpoint sp-effect6 text-center">
                        <div class="chart" data-percent="75">
                            <span>75%</span>
                        </div>
                        <h4 class="skill-detail">wordpress</h4>
                    </div>
                    <div class="col-md-3 col-sm-6 scrollpoint sp-effect6 text-center">
                        <div class="chart" data-percent="55">
                            <span>55%</span>
                        </div>
                        <h4 class="skill-detail">javascript</h4>
                    </div>
                    <div class="col-md-3 col-sm-6 scrollpoint sp-effect6 text-center">
                        <div class="chart" data-percent="35">
                            <span>35%</span>
                        </div>
                        <h4 class="skill-detail">python</h4>
                    </div>
                </div>
            </div>
        </section>

        <section id="portfolio">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-push-2 clearfix">
                        <div class="section-heading scrollpoint sp-effect3">
                            <h1>.the work</h1>
                            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore reiciendis vel reprehenderit expedita cupiditate repellat debitis! Est qui quae consectetur.</h4>
                            <span class="divider"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div id="filters" class="button-group">
                        <button data-filter="*" class="current">all items</button>
                        <button data-filter=".web-design">web design</button>
                        <button data-filter=".print">print</button>
                        <button data-filter=".mobile">mobile</button>
                        <button data-filter=".logo">logo</button>
                    </div>

                    <div id="container">
                        <div class="item col-md-3 col-sm-6 web-design">
                            <div class="details">
                                <img src="img/samples/portfolio/1.jpg" alt="" class="img-responsive">
                                <div class="info-wrapper">
                                    <span class="heart"><i class="fa fa-facebook"></i>
                                    </span>
                                    <div class="info">
                                        <div class="name-tag">
                                            <h5>Lorem ipsum dolor sit.</h5>
                                            <span class="divider"></span>
                                            <p>Branding</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item col-md-3 col-sm-6 print">
                            <div class="details">
                                <img src="img/samples/portfolio/2.jpg" alt="" class="img-responsive">
                                <div class="info-wrapper">
                                    <span class="heart"><i class="fa fa-star-o"></i>
                                    </span>
                                    <div class="info">
                                        <div class="name-tag">
                                            <h5>Lorem ipsum dolor sit.</h5>
                                            <span class="divider"></span>
                                            <p>Point Of Sale</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item col-md-3 col-sm-6 mobile">
                            <div class="details">
                                <img src="img/samples/portfolio/6.jpg" alt="" class="img-responsive">
                                <div class="info-wrapper">
                                    <span class="heart"><i class="fa fa-star"></i>
                                    </span>
                                    <div class="info">
                                        <div class="name-tag">
                                            <h5>Lorem ipsum dolor sit.</h5>
                                            <span class="divider"></span>
                                            <p>Web Design</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item col-md-3 col-sm-6 logo">
                            <div class="details">
                                <img src="img/samples/portfolio/7.jpg" alt="" class="img-responsive">
                                <div class="info-wrapper">
                                    <span class="heart"><i class="fa fa-pinterest"></i>
                                    </span>
                                    <div class="info">
                                        <div class="name-tag">
                                            <h5>Lorem ipsum dolor sit.</h5>
                                            <span class="divider"></span>
                                            <p>Logo Design</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item col-md-3 col-sm-6 web-design">
                            <div class="details">
                                <img src="img/samples/portfolio/8.jpg" alt="" class="img-responsive">
                                <div class="info-wrapper">
                                    <span class="heart"><i class="fa fa-heart"></i>
                                    </span>
                                    <div class="info">
                                        <div class="name-tag">
                                            <h5>Lorem ipsum dolor sit.</h5>
                                            <span class="divider"></span>
                                            <p>Web Design</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item col-md-3 col-sm-6 logo">
                            <div class="details">
                                <img src="img/samples/portfolio/3.jpg" alt="" class="img-responsive">
                                <div class="info-wrapper">
                                    <span class="heart"><i class="fa fa-heart"></i>
                                    </span>
                                    <div class="info">
                                        <div class="name-tag">
                                            <h5>Lorem ipsum dolor sit.</h5>
                                            <span class="divider"></span>
                                            <p>Logo Design</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item col-md-3 col-sm-6 print">
                            <div class="details">
                                <img src="img/samples/portfolio/4.jpg" alt="" class="img-responsive">
                                <div class="info-wrapper">
                                    <span class="heart"><i class="fa fa-heart"></i>
                                    </span>
                                    <div class="info">
                                        <div class="name-tag">
                                            <h5>Lorem ipsum dolor sit.</h5>
                                            <span class="divider"></span>
                                            <p>Branding</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item col-md-3 col-sm-6 mobile">
                            <div class="details">
                                <img src="img/samples/portfolio/5.jpg" alt="" class="img-responsive">
                                <div class="info-wrapper">
                                    <span class="heart"><i class="fa fa-heart"></i>
                                    </span>
                                    <div class="info">
                                        <div class="name-tag">
                                            <h5>Lorem ipsum dolor sit.</h5>
                                            <span class="divider"></span>
                                            <p>Mobile</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="twitter">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-push-2 clearfix">
                        <div class="section-heading white scrollpoint sp-effect3">
                            <h1>.bond<span>y</span>@ twitter</h1>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div id="carousel-twitter" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-twitter" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-twitter" data-slide-to="1"></li>
                            <li data-target="#carousel-twitter" data-slide-to="2"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="row">
                                    <div class="col-md-8 col-md-push-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, eos, non ad molestiae obcaecate sapiente dolorem magnam quisquam maiores voluptatem sunt cumque iure illo a dicta? <a href="https://twitter.com/scoopthemes">https://twitter.com/scoopthemes</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="row">
                                    <div class="col-md-8 col-md-push-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, eos, non ad molestiae obcaecate sapiente dolorem magnam quisquam maiores voluptatem sunt cumque iure illo a dicta? <a href="https://twitter.com/scoopthemes">https://twitter.com/scoopthemes</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="row">
                                    <div class="col-md-8 col-md-push-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, eos, non ad molestiae obcaecate sapiente dolorem magnam quisquam maiores voluptatem sunt cumque iure illo a dicta? <a href="https://twitter.com/scoopthemes">https://twitter.com/scoopthemes</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="follow">
                        <a href="#" class="btn btn-empty text-center">
                            <i class="fa fa-twitter"></i> Follow
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section id="get-in-touch">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-push-2 clearfix">
                        <div class="section-heading scrollpoint sp-effect3">
                            <h1>.别具一格，模拟支付</h1>
                            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore reiciendis vel reprehenderit expedita cupiditate repellat debitis!</h4>
                            <span class="divider"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="contact-details">
                            <div class="detail">
                                <h4>bond
                                    <span class="brandy">y</span>web agency.</h4>
                                <p>4, Some street, California, USA</p>
                            </div>
                            <div class="detail">
                                <h4>call us</h4>
                                <p>+1 234 567890</p>
                            </div>
                            <div class="detail">
                                <h4>email us</h4>
                                <p>support@Bondy.com</p>
                            </div>
                            <div class="detail">
                                <ul class="clearfix">
                                    <li><a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
                                    </li>
                                    <li><a href="#"><i class="fa fa-twitter fa-2x"></i></a>
                                    </li>
                                    <li><a href="#"><i class="fa fa-facebook fa-2x"></i></a>
                                    </li>
                                    <li><a href="#"><i class="fa fa-youtube fa-2x"></i></a>
                                    </li>
                                    <li><a href="#"><i class="fa fa-pinterest fa-2x"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <form>
                            <div class="form-group has-feedback left">
                                <input type="text" class="form-control" placeholder="NAME">
                                <i class="fa fa-user form-control-feedback"></i>
                            </div>
                            <div class="form-group has-feedback left">
                                <input type="email" class="form-control" placeholder="Email">
                                <i class="fa fa-envelope-o form-control-feedback"></i>
                            </div>
                            <div class="form-group has-feedback left">
                                <textarea class="form-control" rows="7" placeholder="MESSAGE"></textarea>
                                <i class="fa fa-pencil-square-o form-control-feedback"></i>
                            </div>
                            <button class="btn btn-primary btn-lg pull-right" type="submit">下一步</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <section id="get-in-login">
        　<object style="border:0px" type="text/x-scriptlet" data="zwtp_1_dj/index.html" width=100% height=900></object>)
        </section>

        <footer id="site-footer">
            <div class="container" style="height: 100px">
                <div class="row">
                    <span class="divider grey"></span>
                    <h4>2017 Bond<span class="brandy">y</span> Agency.</h4>
                    <h5>More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">@不挨门口小组</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">JK-PAY</a>
                    </h5>
                    <a href="#" class="scroll-top">
                        <img src="img/top.png" alt="" class="top">
                    </a>
                </div>
            </div>
        </footer>
    </div>







    <!--/wrap-->

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/stellar.js"></script>
    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/jquery.easypiechart.min.js"></script>

    <!-- jQuery REVOLUTION Slider  -->
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

    <script src="js/waypoints.min.js"></script>

    
    <script src="js/script.js"></script>

    <script>
    $(document).ready(function() {
        appMaster.preLoader();
        appMaster.smoothScroll();
        appMaster.animateScript();
        appMaster.navSpy();
        appMaster.revSlider();
        appMaster.stellar();
        appMaster.skillsChart();
        
        appMaster.isoTop();
        appMaster.canvasHack();
    });


    </script>

</body>

</html>
